<script setup>
import {onBeforeMount, onMounted, ref, onBeforeUnmount} from "vue";
import {isDark} from "@/components/toggleTheme/ToggleTheme.js";
import AMapLoader from "@amap/amap-jsapi-loader";
import {getDistrictCenterCoordinate} from "@/utils/MapUtils.js";
import {getProductById} from "@/api/product.js";
import {useRoute} from 'vue-router'

const route = useRoute()

const deliveryCoordinate = ref([])
let AMap = null

// 地图主题
const MAP_STYLE_NORMAL = 'amap://styles/normal'
const MAP_STYLE_DARK = 'amap://styles/dark'
const MAP_MARK_IMG = '/xwb/bookmall/user/images/delivery.svg'
// 地图对象
let map_dark = null
let map_normal = null
// 创建地图对象
const createMap = (elementId, mapStyle) => {
  // 创建 AMap.Icon 实例：
  const icon = new AMap.Icon({
    size: new AMap.Size(50, 50),    // 图标尺寸
    image: MAP_MARK_IMG,  // Icon的图像
    imageOffset: new AMap.Pixel(0, 0),  // 图像相对展示区域的偏移量，适于雪碧图等
    imageSize: new AMap.Size(50, 50)   // 根据所设置的大小拉伸或压缩图片
  });
  // 标记对象
  const marker = new AMap.Marker({
    position: new AMap.LngLat(deliveryCoordinate.value[0], deliveryCoordinate.value[1]), //经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
    icon: icon,
    offset: new AMap.Pixel(-25, -50)
  });
  // map 对象
  const map = new AMap.Map(elementId, {
    zoom: 12,  //设置地图显示的缩放级别
    center: deliveryCoordinate.value,//设置地图中心点坐标
    mapStyle: mapStyle,  //设置地图的显示样式
    viewMode: '2D',  //设置地图模式
  });
  map.add(marker);
  return map
}

onBeforeMount(async () => {
  // 获取当前商品 id
  const productId = route.query.productId
  // 获取发货地的最后一级
  const deliveries = (await getProductById(productId)).delivery.split('/')
  // 设置谷歌地图使用所需的安全密钥
  window._AMapSecurityConfig = {
    securityJsCode: '85fc0623719ef09cab617d04bcfe4842',
  }
  // 创建谷歌地图组件对象
  AMap = await AMapLoader.load({
    "key": "ec2af04e12fdd316ea6aab110438c23f",
    "version": "2.0",   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    "plugins": [],
  });
  // 获取发货地的经纬度坐标
  deliveryCoordinate.value = await getDistrictCenterCoordinate(deliveries[deliveries.length - 1])
  // 保存 map 地图对象
  setTimeout(() => {
    map_normal = createMap('map_normal', MAP_STYLE_NORMAL)
    map_dark = createMap('map_dark', MAP_STYLE_DARK)
  }, 500)
})
onMounted(async () => {
  // // map 对象
  // setTimeout(() => {
  //   map_normal = createMap('map_normal', MAP_STYLE_NORMAL)
  //   map_dark = createMap('map_dark', MAP_STYLE_DARK)
  // }, 500)
})

// 销毁地图组件
onBeforeUnmount(() => {
  map_normal?.destroy();
  map_dark?.destroy();
})
</script>

<template>
  <div v-show="!isDark" id="map_normal" style="width:100%; height:300px"></div>
  <div v-show="isDark" id="map_dark" style="width:100%; height:300px"></div>
</template>

<style scoped lang="scss">

</style>